<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="audited">
        <navigation :msg="navMsg"></navigation>
        <NavSearch :searchData="searchData"></NavSearch>
        <el-table :height="tableHeight" :data="auditedData">
          <el-table-column min-width="5%" style="display:none" label="序号">
            <template slot-scope="scope">
              <div style="text-align:center">{{scope.$index + 1}}</div>
            </template>
          </el-table-column>
          <el-table-column label="单号" sortable min-width="10%">
            <template slot-scope="scope">
              <div class="ordernum" :title="scope.row.num.num">
                <span
                  v-for="(item,index) in scope.row.num.id"
                  :key="index"
                  v-show="item == 2 || item == 1"
                  :class="item == 1 ? 'dai' : 'te'"
                >{{item == 1 ? '代' : '特'}}</span>
                <span>{{scope.row.num.num}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="客户" min-width="11%">
            <template slot-scope="scope">
              <div :title="scope.row.name">{{scope.row.name}}</div>
            </template>
          </el-table-column>

          <el-table-column label="单据状态" min-width="10%">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.billStatus == 1">已完成</span>
                <span v-if="scope.row.billStatus == 2">待订单审核</span>
                <span v-if="scope.row.billStatus == 3">待出库</span>
                <span v-if="scope.row.billStatus == 4">待财务审核</span>
                <span v-if="scope.row.billStatus == 5">待发货(部分)</span>
                <span v-if="scope.row.billStatus == 6">待提交</span>
                <span v-if="scope.row.billStatus == 7">待发货</span>
                <span v-if="scope.row.billStatus == 8">已作废</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="财务状态" min-width="10%">
            <template slot-scope="scope">
              <div style="color:#f00">
                <span v-if="scope.row.financeStatus == 1">已完成</span>
                <span v-if="scope.row.financeStatus == 2">待收款</span>
                <span v-if="scope.row.financeStatus == 3">待收款</span>
                <span v-if="scope.row.financeStatus == 4">已作废</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="售后状态" min-width="10%" prop="afterSaleStatus"></el-table-column>
          <el-table-column label="订单金额" min-width="10%">
            <template slot-scope="scope">
              <div :title="scope.row.orderPrice">{{scope.row.orderPrice}}</div>
            </template>
          </el-table-column>
          <el-table-column label="待收金额" min-width="10%">
            <template slot-scope="scope">
              <div :title="scope.row.waitPrice">{{scope.row.waitPrice}}</div>
            </template>
          </el-table-column>
          <el-table-column label="交货日期" min-width="10%" prop="deliveryDate"></el-table-column>
          <el-table-column label="制单人" min-width="8%">
            <template slot-scope="scope">
              <div :title="scope.row.maker">{{scope.row.maker}}</div>
            </template>
          </el-table-column>
          <el-table-column label="提交时间" min-width="6%" sortable prop="subDate">
            <template slot-scope="scope">
              <div :title="scope.row.subDate">{{scope.row.subDate}}</div>
            </template>
          </el-table-column>
        </el-table>

        <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import NavSearch from '@/components/common/navSearch/NavSearch'
import Paging from '@/components/common/paging/Paging'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      tableHeight: window.innerHeight - 223,
      navMsg: [
        {
          name: '订单',
          path: '/orders'
        }, {
          name: '待收款订单',
          path: '/eceivablesOrder'
        }
      ],
      searchData: [
        {
          numberingBox: true
        },
        [],
        {
          gaojiseach: true,
          daochu: true
        }
      ],
      ordersData: [
        {
          num: {
            num: 'DH201904290000001',
            id: []
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥2,532.50',
          waitPrice: '￥0',
          billStatus: 1,
          financeStatus: 1,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 2,
          financeStatus: 2,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥10.00',
          waitPrice: '￥2,522.50',
          billStatus: 3,
          financeStatus: 3,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 4,
          financeStatus: 3,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 5,
          financeStatus: 1,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 6,
          financeStatus: 2,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 8,
          financeStatus: 4,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 8,
          financeStatus: 4,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: []
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥2,532.50',
          waitPrice: '￥0',
          billStatus: 1,
          financeStatus: 1,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 2,
          financeStatus: 2,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥10.00',
          waitPrice: '￥2,522.50',
          billStatus: 3,
          financeStatus: 3,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 4,
          financeStatus: 3,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 5,
          financeStatus: 1,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 6,
          financeStatus: 2,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 8,
          financeStatus: 4,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        },
        {
          num: {
            num: 'DH201904290000001',
            id: ['1', '2']
          },
          name: '深圳宝能太古',
          orderPrice: '￥2,532.50',
          acceptedPrice: '￥0.00',
          waitPrice: '￥2,532.50',
          billStatus: 8,
          financeStatus: 4,
          afterSaleStatus: '无退货申请',
          deliveryDate: '',
          maker: '林',
          staff: '陈肃然',
          subDate: '4-29',
          remarks: '',
          printing: 0
        }
      ],
      auditedData: []
    }
  },
  created () {
    for (var i = 0; i < this.ordersData.length; i++) {
      if (this.ordersData[i].financeStatus === 2 || this.ordersData[i].financeStatus === 3) {
        this.auditedData.push(this.ordersData[i])
      }
    }
    // console.log(this.auditedData)
  },
  components: {
    VCommonHeaderLeft,
    NavSearch,
    Paging,
    navigation
  },
  methods: {
    sliceArray (array, size, id) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    getPageId (id = 1) {
      this.pageId = id
      // this.stock = this.sliceArray(this.parentMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      // console.log(num)
      this.pageNum = num
      this.getPageId()
      // console.log(this.stock)
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.tableHeight = window.innerHeight - 223
        that.tableHeight = window.tableHeight
      })()
    }
  }
}
</script>

<style lang="scss">
.audited {
  width: 100%;
  overflow: hidden;
  margin-right: 10px;
  /deep/ table {
    thead {
      tr {
        th:first-child {
          text-align: center;
        }
        th {
          font-size: 12px;
          font-weight: 400;
          padding: 5px 0;
          border-top: 1px #f3f3f3 solid;
          background-color: #fcfcfc;
        }
      }
    }
    tbody {
      tr {
        td {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
